<script lang="ts" setup>
import type { RoutePathSchema } from "@typed-router";

interface NavList {
  name: string
  path: RoutePathSchema | NonNullable<string>
  special?: {
    type: "hot"
  }
}
const navList = shallowRef<NavList[]>([
  { name: "首页", path: "/" },
  { name: "测验", path: "/exam" },
  { name: "流程图", path: "/play" },
  { name: "其他", path: "/about" },
  {
    name: "Python系列",
    path: "/series-python",
    special: {
      type: "hot",
    },
  },
  // { name: "社区", path: "/" },
] as const);
</script>

<template>
  <ul class="flex">
    <li
      v-for="({ name, path, special }, index) of navList"
      :key="index"
      class="hover:bg-gray-100 rounded-md rubber-animation dark:hover:bg-gray-700"
    >
      <UButton size="md" variant="link" class="text-blue-400">
        <template #default>
          <NuxtLink
            :to="path"
            :class="
              special && special.type === 'hot'
                ? tw`text-red-600 underline`
                : ''
            "
          >
            <span class="text-base font-medium">
              <UIcon
                v-if="special && special.type === 'hot'"
                name="fxemoji:fire"
              />
              {{ name }}
            </span>
          </NuxtLink>
        </template>
      </UButton>
    </li>
  </ul>
</template>

<style scoped></style>
